<template>
	<view v-if="data" :class="$attrs" class="px-12 py-16 bg-white fs-14 text-color-regular" @click="toOrderDetail">
		<view class="flex justify-between item-center">
			<view class="flex-col">
				<view class="font-normal fs-12">订单编号：{{data.orderNo}}</view>
				<view class="mt-4 fs-12" style="color:rgba(0, 0, 0, 0.3);">下单时间：{{data.orderTime}}</view>
			</view>
			<view class="text-bold" :style="`color:${currentOrderState.color}`">{{currentOrderState.text}}</view>
		</view>
		<view class="h-1 bg-default mt-8 mb-16"></view>
		<view class="flex">
			<view class="relative mr-12 flex-shrink">
				<image class="radius-8" style="width:80px;height:80px;" :src="coverPicture"></image>
				<!-- <template v-if="isSignUp">
					<image class="w-32 h-18 absolute" style="top:0;left:-4px;" src="@/static/svg/order/bg-flag.svg"></image>
					<text class="absolute w-24 h-11 text-center" style="font-size:8px;top:2px;left:0;">报名</text>
				</template> -->
			</view>
			<view class="flex-1 w-0">
				<view class="text-bold">
					<tag v-if="promotionLabel" class="mr-4">{{ promotionLabel }}</tag>
					{{data.activeTitle}}
				</view>
				<!-- 开启未满自动退，显示报名结束时间，未开启未满自动退的，显示核销时间 -->
				<template v-if="isSignUp && data.noFullAutoRefundState === 1 && [1,2].includes(data.orderState)">
					<view class="mt-6 fs-12" style="color:rgba(0, 0, 0, 0.3);">报名结束时间：{{data.endTime}}</view>
				</template>
				<view v-else class="mt-6 fs-12 text-cut" style="color:rgba(0, 0, 0, 0.3);">有效期：{{data.validStartTime}} ~ {{data.validEndTime}}</view>
			</view>
		</view>
		<view class="mt-8 flex justify-end">
			<view class="h-25 text-right">
				<text class="fs-12" style="font-weight:500;">实付金额：</text>
				<text v-if="data.orderType === 5" class="color-primary">{{data.payPrice}}积分</text>
				<template v-else>
					<text class="color-primary">¥</text>
					<text class="color-primary fs-21 text-bold">{{numberFormat(data.payPrice)}}</text>
				</template>
			</view>
		</view>
		<view class="h-1 bg-default mt-16 mb-12"></view>
		<view class="flex justify-between item-center">
			<view>
				<template v-if="[2,4].includes(viewOrderType)">
					<view class="leading-20">
						<view class="flex item-center fs-14">
							<template v-if="data.userId !== userStore.userInfo.id">
								<text>下单人：</text>
								<image class="cu-avatar round mx-4 size-16" :src="data.orderAvatar"></image>
								<text>{{data.orderNickName}}</text>
							</template>
						</view>
						<view v-if="data.agentId" class="flex item-center fs-14 mt-8">
							<text class="mr-12">经纪人：{{data.agentNickName}}</text>
							<view v-if="data.commissionAmt">
								<text>佣金：¥{{numberFormat(data.commissionAmt)}}</text>
							</view>
							<view v-else-if="data.otherEquity" class="inline-flex item-center">
								<text class="fs-14 text-color-hint">查看推广权益</text>
								<image class="size-16" src="@/static/svg/order/icon-double-arrow.svg"></image>
							</view>
						</view>
					</view>
				</template>
				<template v-if="viewOrderType===1 || viewOrderType===3 || viewOrderType===5">
					<view class="leading-20">
						<view class="flex item-center fs-14">
							<template v-if="data.userId !== userStore.userInfo.id">
								<text>下单人：</text>
								<image class="cu-avatar round mx-4 size-16" :src="data.orderAvatar"></image>
								<text>{{data.orderNickName}}</text>
							</template>
						</view>
						<view v-if="data.agentId" class="flex item-center fs-14 mt-8">
							<view v-if="viewOrderType===5 && data.agentPointsAmt">
								<text>{{numberFormat(data.agentPointsAmt)}}积分</text>
							</view>
							<view v-if="viewOrderType!==5 && data.commissionAmt">
								<text>佣金：¥{{numberFormat(data.commissionAmt)}}</text>
							</view>
							<view v-if="viewOrderType!==5 && data.rewardPoints">
								<text>权益：{{data.rewardPoints}}积分</text>
							</view>
							<view v-else-if="viewOrderType !== 1 && data.otherEquity" class="inline-flex item-center">
								<text class="fs-14 text-color-hint">查看推广权益</text>
								<image class="size-16" src="@/static/svg/order/icon-double-arrow.svg"></image>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<text v-if="data.returnAmt && [5].includes(data.orderState)" class="fs-14 text-color-hint">可返<text class="text-bold fs-16 color-primary">{{data.returnAmt}}</text>元</text>
				</template>
			</view>
			<view class="flex">
				<view v-if="viewOrderType===1&&data.orderState===1" 
					class="h-26 inline-flex center color-primary radius-8 fs-12 border-primary ml-8" 
					style="width:68px;" @click.stop="cancelOrder">取消订单</view>
				<view v-if="data.promotionType==='GROUP_BUY' && ![1,6,4].includes(data.orderState)"
					class="h-26 inline-flex center color-secondary-warning fs-12 radius-8 border-secondary-warning ml-8" 
					style="width:80px;" @click.stop="toGroupBuyDetail">拼团详情</view>
				<view v-if="viewOrderType===1&&data.orderState===1" 
					class="h-26 inline-flex center bg-primary radius-8 fs-12 text-white ml-8" 
					style="width:68px;" @click.stop="toOrderPay(false)">去支付</view>
				<!-- 我购买的，待支付订单不显示订单详情按钮，而是显示去支付按钮 -->
				<view v-if="!(viewOrderType===1&&data.orderState===1)" 
					class="h-26 inline-flex center color-primary fs-12 radius-8 border-primary ml-8" 
					style="width:80px;" @click.stop="toOrderDetail">订单详情</view>
				<view v-if="viewOrderType===1&&([2,3].includes(data.orderState)) && (data.orderType===2 ||data.orderType===4) && data.activePromotionType!=='GROUP_BUY'" 
					class="h-26 inline-flex center color-secondary-warning fs-12 radius-8 border-secondary-warning ml-8" 
					style="width:80px;" @click.stop="toActivityDetail">活动详情</view>
			</view>
		</view>
		<view v-if="data.orderState===10 && !isExpired(data.groupBuyOrderInfo.expiredTime)" class="mt-8 flex">
			<view class="flex justify-end w-full">
				<view class="flex-1 flex justify-end item-center fs-12 mr-8" style="color: rgba(51,51,51,0.6);">
					再邀<view class="color-primary">{{data.groupBuyOrderInfo.groupNum - data.groupBuyOrderInfo.currentNum }}</view>人，可成团
				</view>
				<button type="button" class="radius-8 cf bg-primary px-16 py-4 fs-12 leading-22" @click.stop="toInvite('groupBuyWithFriend')">
					邀请好友
				</button>
			</view>
		</view>
		<!-- 报名时间结束前，未满员要显示邀请，固定人数显示还差x人，阶梯人数显示人数和返现信息 -->
		<!--
		<view v-if="viewOrderType===1 && isSignUp && (![4,6,7].includes(data.orderState)) && (new Date(data.endTime).getTime() > new Date().getTime()) && data.inviteReturnMsg" class="flex justify-end item-center mt-8">
			<view class="inline-flex text-color-hint fs-14" v-html="inviteReturnMsg"></view>
			<view class="radius-8 inline-flex center bg-primary h-26 fs-12 text-white ml-8" style="width:80px;" @click.stop="toInvite">邀请好友</view>
		</view>
		-->
		<block v-if="viewOrderType===1 && isSignUp && ![1,4,6,7].includes(data.orderState) && (new Date(data.endTime).getTime() > new Date().getTime()) && data.promotionType!=='GROUP_BUY'">
			<!-- 阶梯人数 -->
			<block v-if="data.stepPriceState===2">
				<!-- 未满自动退 -->
				<block v-if="data.noFullAutoRefundState===1">
					<view v-if="data.inviteReturnMsg" class="flex justify-end item-center mt-8">
						<view class="inline-flex text-color-hint fs-14" v-html="inviteReturnMsg"></view>
						<view class="radius-8 inline-flex center bg-primary h-26 fs-12 text-white ml-8" style="width:80px;" @click.stop="toInvite">邀请好友</view>
					</view>
				</block>
				<block v-else>
					<view v-if="data.inviteReturnMsg" class="flex justify-end item-center mt-8">
						<view class="inline-flex text-color-hint fs-14" v-html="inviteReturnMsg"></view>
						<view class="radius-8 inline-flex center bg-primary h-26 fs-12 text-white ml-8" style="width:80px;" @click.stop="toInvite">邀请好友</view>
					</view>
				</block>
			</block>
			<!-- 固定人数 -->
			<block v-else>
				<!-- 未满自动退 -->
				<block v-if="data.noFullAutoRefundState===1">
					<!-- 未满员、未结束 -->
					<view v-if="data.missNum" class="flex justify-end item-center mt-8">
						<view class="inline-flex text-color-hint fs-14" v-html="inviteReturnMsg"></view>
						<view class="radius-8 inline-flex center bg-primary h-26 fs-12 text-white ml-8" style="width:80px;" @click.stop="toInvite">邀请好友</view>
					</view>
				</block>
			</block>
		</block>
	</view>
</template>

<script setup name="OrderLiteItem">
	import { computed, ref, watchEffect } from 'vue'
	import { orderPayApi, orderToPay, cancelOrderApi } from '@/api/order.js'
	import { useOrder } from '@/hooks/useOrder.js'
	import { numberFormat,isExpired } from '@/utils/index.js'
	import { useUserStore } from '@/stores/modules/user.js'
	import Tag from '@/components/tag/tag.vue'
	
	const userStore = useUserStore()
	
	const props = defineProps({
		// 查看的订单类型：1 我购买的订单；2 我卖出的订单；3 我分销的订单；4-团购+报名订单,5积分订单
		viewOrderType: {
			type: Number
		},
		data: {
			type: Object,
			required: true
		}
	})
	
	const emits = defineEmits(['onOrderUdate','toShare'])
	
	const { isSignUp, coverPicture, updateOrderInfo } = useOrder()
	
	watchEffect(() => {
		updateOrderInfo(props.data)
	})
	
	const orderStateDict = {
		1: {
			text: '待支付',
			color: '#FA4543'
		},
		2: {
			text: '待核销',
			color: '#FCB513'
		},
		3: {
			text: '核销中',
			color: '#FA4543'
		},
		4: {
			text: '已取消',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		5: {
			text: '已完成',
			color: '#16BE62'
		},
		6: {
			text: '已关闭',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		7: {
			text: '已核销',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		8: {
			text: '支付中',
			color: '#FA4543'
		},
		9: {
			text: '待审核',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		10: {
			text: '待成团',
			color: 'rgba(51, 51, 51, 0.60)'
		},
	}
	
	const currentOrderState = computed(() => {
		if (props.data) {
			if (props.viewOrderType === 1 && props.data.orderState === 4 && '票付通出票失败' === props.data.orderNote) {
				return {
					text: '库存不足,已取消',
					color: 'rgba(51, 51, 51, 0.60)'
				}
			} else {
				return orderStateDict[props.data.orderState] || {}
			}
		}
		return {}
	})
	
	const toOrderDetail = () => {
		if (props.viewOrderType === 1 && props.data.orderState === 1) {
			toOrderPay(true)
			// uni.navigateTo({
			// 	url: `/pagesA/order/wait-pay?id=${props.data.id}`,
			// 	events: {
			// 		onRefresh() {
			// 			emits('onOrderUdate')
			// 		}
			// 	}
			// })
		} else {
			uni.navigateTo({
				url: `/pagesA/order/order-detail?id=${props.data.id}&type=${props.viewOrderType}`,
				events: {
					onRefresh() {
						emits('onOrderUdate')
					}
				}
			})
		}
	}
	
	// 报名活动详情
	const toActivityDetail = () => {
		uni.navigateTo({
			url: `/pagesA/order/activity-detail?id=${props.data.id}`
		})
	}

	const toGroupBuyDetail = ()=>{
		uni.navigateTo({
			url: `/pagesA/order/group-buy-detail?id=${props.data.id}&activeId=${props.data.activeId}`
		})
	};

	const promotionLabel = computed(() => {
		return props.data && props.data.groupBuyOrderInfo ? `${props.data.groupBuyOrderInfo.groupNum}人团` : '';
	});
	
	const cancelOrder = () => {
		uni.showModal({
			content: '确定取消？',
			success: (res) => {
				if (res.confirm) {
					cancelOrderApi({orderId: props.data.id}).then(res => {
						uni.showToast({
							icon: 'none',
							title: '已取消'
						})
						emits('onOrderUdate')
					})
				}
			}
		})
	}
	
	const toOrderPay = (update) => {
		orderToPay({orderNo:props.data.orderNo}).then(res =>{
			uni.navigateTo({
				url: `/pagesA/order/wait-pay?id=${props.data.id}`,
				events: {
					onRefresh() {
						if(update){
							emits('onOrderUdate')
						}
					}
				}
			})
		}).catch(err => {
			uni.showToast({
				icon:"none",
				title:err.message
			})
		})
		
	}
	
	const inviteReturnMsg = computed(() => {
		let str = props.data.inviteReturnMsg
		const regex = /\d+/g
		str = str.replace(/(\d*\.?\d+)/g, function(match, val, index) {
			if (index > 2) {
				return `<span class="color-primary fs-16 font-semibold">${match}</span>`
			} else {
				return `<span class="color-primary fs-16">${match}</span>`
			}
		})
		return str
	})
	
	const toInvite = (type) => {
		if(type==='groupBuyWithFriend'){
			emits('toShare',{
				data:props.data,
				type:'inviteFrient2GroupBuy'
			})
			return;
		}
		uni.$emit('showSharePopup', {
			type: 'activity',
			payload: {
				id: props.data.activeId,
			}
		})
	}

</script>
